<template>
  <div class="carousel-management">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>走马灯管理</span>
          <el-button type="primary" @click="handleAddCarousel">
            添加走马灯
          </el-button>
        </div>
      </template>
      <Table ref="tableRef" :params="pagination" :api="getPaginatedCarousels">
        <template #columns>
          <el-table-column prop="id" label="ID" min-width="80" />
          <el-table-column prop="title" label="标题" min-width="180" show-overflow-tooltip />
          <el-table-column prop="status" label="状态" min-width="100">
            <template #default="{ row }">
              <el-tag :type="row.status === 'active' ? 'success' : 'info'">
                {{ row.status === "active" ? "激活" : "未激活" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="150">
            <template #default="{ row }">
              <el-button-group>
                <el-button
                  type="primary"
                  size="small"
                  @click="handleEditCarousel(row)"
                >
                  编辑
                </el-button>
                <el-button
                  type="danger"
                  size="small"
                  @click="handleDeleteCarousel(row)"
                >
                  删除
                </el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </template>
      </Table>
    </el-card>

    <!-- 走马灯表单对话框 -->
    <modal
      ref="modalRef"
      :title="dialogType === 'add' ? '添加走马灯' : '编辑走马灯'"
      width="500px"
      :path="'/views/admin/carousel/EditCarousel.vue'"
      @success="tableRef?.fetchData()"
    >
    </modal>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import Table from "@/components/table/index.vue";
import { getPaginatedCarousels, deleteCarousel } from "@/api/carousel";
import modal from "@/components/modal/index.vue";

const dialogType = ref<"add" | "edit">("add");
const formData = ref({
  title: "",
  subTitle: "",
  description: "",
  imageUrl: "",
  backgroundColor: "",
  linkUrl: "",
  status: "inactive",
  order: 0,
});
const tableRef = ref<InstanceType<typeof Table> | null>(null);
const modalRef = ref<InstanceType<typeof modal> | null>(null);

const pagination = ref({
  page: 1,
  limit: 10,
});

const handleAddCarousel = () => {
  dialogType.value = "add";
  formData.value = {
    title: "",
    subTitle: "",
    description: "",
    imageUrl: "",
    backgroundColor: "",
    linkUrl: "",
    status: "inactive",
    order: 0,
  };
  modalRef.value?.open();
};

const handleEditCarousel = (row) => {
  dialogType.value = "edit";
  formData.value = { ...row };
  modalRef.value?.open();
};

const handleDeleteCarousel = (row) => {
  ElMessageBox.confirm("确定要删除该走马灯吗？", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    deleteCarousel(row.id).then((res) => {
      if (res) ElMessage.success("删除成功");
      tableRef.value?.fetchData();
    });
  });
};
</script>

<style scoped lang="scss">
.carousel-management {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
